<template xmlns:el-col="http://www.w3.org/1999/html">
  <el-container>
    <el-header>
      <el-row>
        <el-col :span=2>
          <el-button type="warning" icon="el-icon-arrow-left" @click="back"></el-button>
        </el-col>
        <el-col :span="2">
          <span style="color: #e9d199; font-size: 1.5em">用户中心</span>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="16">
          <el-row>
            <el-col v-for="exhibit in exhibits" :key="exhibit.exId">
              <el-card style="margin: 10px" :body-style="{ padding: '0px' }" @click="">
                <div class="content-box">
                  <div class="left">
                    <img :src="exhibit.exImage"
                         class="image">
                  </div>
                  <div class="right">
                    <div style="font-size: 1.5em">{{ exhibit.exName }}</div>
                    <div class="" style="margin-top:10px; text-align: left" v-html="exhibit.exDetail"></div>
                    <div class="bottom">
                      <el-tag type="success" style="margin: 5px">开始时间：{{ exhibit.exStart }}</el-tag>
                      <el-tag type="danger" style="margin: 5px">结束时间：{{ exhibit.exEnd }}</el-tag>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-card style="margin: 10px">
            <el-table
                :data="tableData"
                style="width: 100%">
              <el-table-column
                  prop="exName"
                  label="展览名称">
              </el-table-column>
              <el-table-column
                  prop="moment"
                  label="入场时刻"
                  width="200">
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-divider>
          <div style="background-color: #f9f4e9;color: #b99b3d">历史不落 繁华依旧</div>
        </el-divider>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {getUserExhibits, getUserExhibitsDetails} from "@/api/request";

export default {
  data() {
    return {
      currentUser: {},
      tableData: [{
        exName: '',
        moment: ''
      }],
      exhibits: [
        {
          exId: 1,
          exName: '',
          exDetail: '',
          exImage: '',
          exStart: '',
          exEnd: ''
        }
      ],
    };
  },
  methods: {
    back() {
      this.$router.push('/')
    },
    getUser() {
      if (sessionStorage.getItem("currentUser") != null) {
        this.currentUser = JSON.parse(sessionStorage.getItem("currentUser"))
        console.log(this.currentUser)
      }
    },
    getExhibit() {
      getUserExhibits(this.currentUser.userId).then(
          res => {
            if (res.data.code === 1) {
              this.tableData = res.data.data
              console.log(this.tableData)
            }
          }
      )
    },
    getUserExhibits() {
      getUserExhibitsDetails(this.currentUser.userId).then(
          res => {
            if (res.data.code === 1) {
              this.exhibits = res.data.data
            }
          }
      )

    },
  },
  mounted() {
    this.getUser()
    this.getExhibit()
    this.getUserExhibits()
    console.log(this.currentUser)
  }
}
</script>

<style>
.el-header, .el-footer {
  background-image: url("@/assets/nav_bg.jpg");
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-button {
  box-shadow: none !important;
}

.el-table {
  box-shadow: 0 6px 8px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

::v-deep .el-table__row {
  background-color: #f9f4e9 !important;
}

::v-deep .el-table th.el-table__cell {
  background-color: #f9f4e9 !important;
}
</style>
